<template>
  <div class="dashboard-editor-container">

    <el-row :gutter="40" class="panel-group">
      <el-col v-permission="['GET /admin/p/index_usersum']" :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="caidanlan-kehu-kehugonggongchi" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">{{ $t('Users') }}</div>
            <count-to :start-val="0" :end-val="userTotal" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col v-permission="['GET /admin/p/index_productsum']" :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('messages')">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="caidanlan-hetong-hetonghuikuankaipiaotongji" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">{{ $t('Products') }}</div>
            <count-to :start-val="0" :end-val="goodsTotal" :duration="3000" class="card-panel-num" />
            <i class="el-icon-star-on" style="color: red"></i>
          </div>
        </div>
      </el-col>
      <el-col v-permission="['GET /admin/p/index_stocksum']" :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('purchases')">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="caidanlan-caigou-caigoudaohuotixing" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">{{ $t('Stock1') }}</div>
            <count-to :start-val="0" :end-val="productTotal" :duration="3200" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col v-permission="['GET /admin/p/index_ordersum']" :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('shoppings')">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="caidanlan-kehu-kehuduizhangdan" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">{{ $t('Orders') }}</div>
            <i class="el-icon-s-flag" style="color: red"></i>
            <count-to :start-val="0" :end-val="orderTotal" :duration="3600" class="card-panel-num" />
            <i class="el-icon-s-flag" style="color: blue"></i>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-card style="margin-bottom:32px;">
      <div slot="header" class="clearfix">
        <svg-icon icon-class="version" class="version-icon" />
        <span>{{ $t('更新日志') }}</span>
        <el-radio-group v-model="reverse">
          <el-radio :label="false">{{ $t('正序') }}</el-radio>
          <el-radio :label="true">{{ $t('倒序') }}</el-radio>
        </el-radio-group>
        <el-button icon="el-icon-edit" @click="versionPassVisible=true" style="float: right; padding: 3px 0;color: #4AB7BD" type="text">{{ $t('添加新迭代') }}</el-button>
      </div>
      <el-collapse v-model="activeName" accordion  >
        <el-empty v-if="versionHistory.length == 0" description="还没有内容～" :image-size="200"></el-empty>
      <el-timeline :reverse="reverse" >
        <template  v-for="(item,index) in versionHistory">
          <el-timeline-item :timestamp="item.addTime" placement="top" color="#4AB7BD" icon="el-icon-s-promotion">
            <el-card>
              <el-row>
                <el-col :span="18" :style="{width:'100%'}">
                  <el-badge :is-dot="item.isNew" class="item">
                  <h4 style="margin-top:0;line-height: 15px"><i class="el-icon-s-promotion"></i> {{item.title }} </h4>
                  </el-badge>
                  <p class="colorText">{{ $t('版本号') + "：" + 'v'+item.version }}</p>
                  <span class="colorText">{{ $t('测试人员') + '：' + item.testPerson }}</span> ——>
                  <span class="colorText">{{ $t('验收人员') + '：' + item.checkPerson }}</span>
                  <el-collapse-item :title="$t('更新内容')" :name="index" >
                    <div style="padding-left: 20px" v-for="str in item.content">{{ str }}</div>
                  </el-collapse-item>
                  <el-collapse-item :title="$t('注意事项')" :name="index">
                    <template slot="title">
                      <i class="header-icon el-icon-info"></i> {{ $t('注意事项') }}
                    </template>
                    <div style="padding-left: 20px" v-for="str in item.keep">{{ str }}</div>
                  </el-collapse-item>
                  <br>
                  <p style="float: right">
                    <el-tag class="downloadFile" @click="downloadiPhone()" type="info"><i class="el-icon-download"></i> {{ $t('iPhone APP-iOS下载') }}</el-tag>
                    <el-tag class="downloadFile" @click="handleDownload(item.appDownload,'app-v'+item.version+'-release.apk')"><i class="el-icon-download"></i> {{ $t('APP安装包-Android下载') }}</el-tag>
                    <el-tag class="downloadFile" @click="handleDownload(item.posDownload,'pos-v'+item.version+'-release.apk')" type="success"><i class="el-icon-download"></i> {{ $t('POS安装包-Android下载') }}</el-tag>
                    <el-tag class="downloadFile" @click="downloadWord(item.wordDownload)" type="warning"><i class="el-icon-document"></i> {{ $t('Word 更新文档下载') }}</el-tag>
                    <el-popconfirm
                      :confirm-button-text="$t('确定')"
                      :cancel-button-text="$t('不用了')"
                      icon="el-icon-info"
                      icon-color="red"
                      @confirm="versionHistoryHandlerDelete(item.id)"
                      title="这次版本更新日志，确定删除吗？">
                      <el-link style="margin-left: 30px" slot="reference" icon="el-icon-delete" type="primary">{{ $t('删除日志') }}</el-link>
                    </el-popconfirm>
                  </p>
                </el-col>
              </el-row>
            </el-card>
          </el-timeline-item>
        </template>
      </el-timeline>
      </el-collapse>
      <pagination v-show="versionQuery.total > 10" :total="versionQuery.total" :page.sync="versionQuery.page" :limit.sync="versionQuery.limit"
                  @pagination="versionHistorylist" />
    </el-card>
    <el-card style="margin-bottom:32px;">
      <div slot="header" class="clearfix">
        <span>{{ $t('最近登陆用户') }}</span>
      </div>
      <el-timeline :reverse="false" >
        <template  v-for="item in timelineList">
          <el-timeline-item :timestamp="splitTime(item.lastLoginTime)" placement="top">
            <el-card>
              <el-row>
                <el-col :span="2">
                    <el-avatar :src="item.avatar"></el-avatar>
                    <i v-if="item.gender == 3" class="el-icon-male" style="color:#36a3f7;" />
                    <i v-if='item.gender == 2' class="el-icon-female" style="color:pink;" />
                </el-col>
                <el-col :span="18">
                  <h4 style="margin-top:0;">{{ $t('Member_account') + '：' + item.username }} <i class="el-icon-user"></i></h4>
                  <p class="colorText">{{ $t('Login_Ip') + '：' + item.lastLoginIp }}</p>
                  <span class="colorText">{{ $t('昵称') + '：' + item.nickName }}</span>
                  <span class="colorText">{{ $t('最后一次登录于') }}</span>
                  <span class="colorText">{{ $t('地区') + "：" + item.location }}</span>
                  <span class="colorText">{{ $t('时间') + "：" + item.lastLoginTime }}</span>
                </el-col>
              </el-row>
            </el-card>
          </el-timeline-item>
        </template>

      </el-timeline>
    </el-card>

<!--    添加新迭代面板密码确认-->
    <el-dialog
      :title="$t('身份确认')"
      :visible.sync="versionPassVisible"
      width="30%"
     >
      <el-divider><i class="el-icon-key"></i>{{$t('请输入密码再继续')}}</el-divider>
      <el-form label-width="80px">
        <el-form-item :label="$t('密码')" prop="password">
          <el-input clearable v-model="versionPassowrd" type="password"></el-input>
        </el-form-item>
      </el-form>
      <h6 align="center" style="color: #9a9da2"><i class="el-icon-question"></i> {{$t('不知道密码？请联系管理人员。')}}</h6>
      <div slot="footer" class="dialog-footer">
        <el-button @click="versionPassVisible = false">{{$t('放弃验证')}}</el-button>
        <el-button type="primary" icon="el-icon-right" @click="checkVersionPass">{{$t('确定')}}</el-button>
      </div>
    </el-dialog>

<!--    添加新迭代面板-->
    <el-drawer
      size="40%"
      :title="$t('添加新迭代')"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose">
      <h2 align="center">{{$t('填写新迭代信息')}}</h2>
      <el-form :model="versionForm" :rules="versionRules" ref="versionForm" label-width="150px" class="demo-ruleForm">
        <el-form-item :label="$t('版本标题')" prop="title" >
          <el-input clearable :style="{ width: '450px' }" v-model="versionForm.title" :placeholder="$t('请输入内容')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('版本号')" prop="version">
          <el-input clearable :style="{ width: '450px' }" v-model="versionForm.version" :placeholder="$t('请输入内容')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('测试人员')" prop="testPerson">
          <el-input clearable :style="{ width: '450px' }" v-model="versionForm.testPerson" :placeholder="$t('请输入内容')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('验收人员')" prop="checkPerson">
          <el-input clearable :style="{ width: '450px' }" v-model="versionForm.checkPerson" :placeholder="$t('请输入内容')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('更新内容')" prop="content">
          <el-input clearable :style="{ width: '450px' }" :autosize="{ minRows: 6}" type="textarea" v-model="versionForm.content" :placeholder="$t('请输入内容')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('注意事项')" prop="keep">
          <el-input clearable :style="{ width: '450px' }" :autosize="{ minRows: 4}" type="textarea" v-model="versionForm.keep" :placeholder="$t('请输入内容')"></el-input>
        </el-form-item>
        <el-form-item align="center" :label="$t('上传更新文档')" prop="name">
          <el-upload
            limit="3"
            multiple
            accept=".docx,.doc,.1"
            class="upload-demo"
            ref="upload"
            :action="uploadApkPath"
            :on-exceed="handleExceed"
            :on-success="handleSuccess"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false">
            <el-button icon="el-icon-thumb" slot="trigger" size="mini" type="primary">选取 更新文档 | APK</el-button>
            <el-button icon="el-icon-upload" style="margin-right: 20px" size="mini" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">只能上传word/apk文件(规则要按照app|pos开头，或docx文档格式)</div>
          </el-upload>
        </el-form-item>
        <el-form-item align="center">
          <el-button type="primary" @click="submitForm('versionForm')">{{ $t('提交添加') }}</el-button>
          <el-button @click="resetForm('versionForm')">{{ $t('重置') }}</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>


    <el-card>
      <div slot="header" class="clearfix">
        <span>{{ $t('Membership_data') }}</span>
        <i class="el-icon-pie-chart"></i>
      </div>
<!--      <el-row style="margin-bottom: 20px;">
        <el-col :span="6" align="center">
          <el-row>
            <span style="font-size: 30px;color: #ff3d3d;">{{ overview.userTodayCount }}</span>
          </el-row>
          <el-row>
            {{ $t('Today_new_memberships') }}
          </el-row>
        </el-col>
        <el-col :span="6" align="center">
          <el-row>
            <span style="font-size: 30px;color: #ff3d3d;">{{ overview.userYesterdayCount }}</span>
          </el-row>
          <el-row>
            {{ $t('Yesterday_new_memeberships') }}
          </el-row>
        </el-col>
        <el-col :span="6" align="center">
          <el-row>
            <span style="font-size: 30px;color: #ff3d3d;">{{ overview.userMonthCount }}</span>
          </el-row>
          <el-row>
            {{ $t('This_month_new_memberships') }}
          </el-row>
        </el-col>
        <el-col :span="6" align="center">
          <el-row>
            <span style="font-size: 30px;color: #ff3d3d;">{{ overview.userTotal }}</span>
          </el-row>
          <el-row>
            {{ $t('Total_members') }}
          </el-row>
        </el-col>
      </el-row>-->

<!--      条件面板-->
      <el-row style="margin-bottom: 20px;">
        <el-col :span="3" align="center">
          <el-row>
            <el-tag effect="dark">{{ $t('会员总数：') + memberTotal }}</el-tag>
          </el-row>
        </el-col>
        <el-col :span="6" align="center">
          <el-row>
            <el-select clearable v-model="memberRegisterOptionsValue" placeholder="请选择">
              <el-option
                v-for="item in memberRegisterOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-row>
        </el-col>
        <el-col :span="6" align="center">
          <el-row>
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              :picker-options="memberPickerOptions"
              align="right"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd hh:mm"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-row>
        </el-col>
        <el-col :span="8" align="center">
          <el-row>
            <el-button type="primary" @click="getData()" icon="el-icon-search">查找</el-button>
          </el-row>
        </el-col>
      </el-row>

      <el-card>
        <div slot="header" class="clearfix">
          <span>{{ $t('Membership_growth') }}</span>
<!--          <div style="display: inline;float: right;">
            <div v-show="countFilterType == 1" style="display: inline;float: right;" class="block">
              <el-date-picker v-model="dateRange" type="daterange" @change="handleDateChange" format="yyyy-MM-dd"
                value-format="yyyy-MM-dd hh:mm" :placeholder="$t('Select_dates')">
              </el-date-picker>
            </div>
            <div v-show="countFilterType == 2" style="display: inline;float: right;" class="block">
              <el-date-picker v-model="dateRange" type="monthrange" @change="handleDateChange" format="yyyy-MM"
                value-format="yyyy-MM-dd hh:mm" :placeholder="$t('选择月份')" style="width:350px;">
              </el-date-picker>
            </div>
          </div>
          <div style="display: inline;float: right;width: 120px;">
            <el-select v-model="countFilterType" @change="changeType">
              <el-option :label="$t('By_day')" :value="1"></el-option>
              <el-option :label="$t('By_month')" :value="2"></el-option>
            </el-select>
          </div>-->
        </div>
        <ve-line :data="lineData" :settings="lineSettings" :extend="chartExtend"></ve-line>
        <div align="center">{{ $t('日期') }} <i class="el-icon-date"></i></div>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios';
import { info } from '@/api/dashboard'
import{versionHistory,versionHistoryAdd,versionHistoryDelete,downloadFile} from "@/api/versionHistory";
import { uploadApkPath } from '@/api/storage'
import { queryUserStatistics, queryAddUserStatistics } from '@/api/statistics'
import { getLoginHistory } from '@/api/user'
import { formatDate } from '@/utils/date'
import CountTo from 'vue-count-to'
import Pagination from '@/components/Pagination'
export default {
  components: {
    CountTo,Pagination
  },
  data() {
    const startDate = formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24 * 60), 'yyyy-MM-dd hh:mm');
    const endDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm');
    const fileTypeMap={
      1: this.$t('APP.APK'),
      2: this.$t('POS.APK'),
      3: this.$t('WORD')
    }

    return {
      //会员下拉框选项
      memberRegisterOptions: [{
        value: '0',
        label: '手机号注册'
      }, {
        value: '1',
        label: '邮箱注册'
      }, {
        value: '2',
        label: 'Apple ID'
      }],
      memberRegisterOptionsValue:'',
      memberPickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      memberTotal:0,


      reverse: false,
      activeName: '1',
      versionQuery:{
        page: 1,
        limit: 20,
        total: 0,
      },
      versionHistory:[],
      uploadApkPath,
      fileList:[],
      versionForm:{
        version:undefined,
        testPerson:undefined,
        checkPerson:undefined,
        appDownload:undefined,
        posDownload:undefined,
        content:undefined,
        keep:undefined,
        title:undefined,
        wordDownload:undefined
      },
      fileTypeMap,
      versionPassVisible:false,
      versionPassowrd:undefined,

      versionRules: {
        title: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          { min: 1,  message: '长度在 1 到 ∞ 个字符', trigger: 'blur' }
        ],
        version: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        testPerson: [
          { required: true, message: '请输入内容', trigger: 'blur' },
        ],
        checkPerson: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        keep: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      },




      drawer: false,
      direction: 'rtl',
      userTotal: 0,
      goodsTotal: 0,
      productTotal: 0,
      orderTotal: 0,
      countFilterType: 1,
      // avatar: '',
      dateRange: [startDate, endDate],
      timelineList: [],
      overview: {
        userTodayCount: 0,
        userYesterdayCount: 0,
        userMonthCount: 0,
        userTotal: 0
      },
      lineData: {
        columns: ['addTime', 'count'],
        rows: [
          { '日期': '01月', '新增会员数': 1393 },
          { '日期': '02月', '新增会员数': 3530 },
          { '日期': '03月', '新增会员数': 2923 },
          { '日期': '04月', '新增会员数': 1723 },
          { '日期': '05月', '新增会员数': 3792 },
          { '日期': '06月', '新增会员数': 4593 }
        ]
      },
      lineSettings: {
        yAxisName: [this.$t('数量')],
        // xAxisType: 'time'
        yAxisAxisStick: {
          length: 1
        }
      },
      chartExtend: {
        'yAxis.0.minInterval': 1
      },
    }
  },

  created() {
    info().then(response => {
      this.userTotal = response.data.data.userTotal
      this.goodsTotal = response.data.data.goodsTotal
      this.productTotal = response.data.data.productTotal
      this.orderTotal = response.data.data.orderTotal
    });
    this.getData();
    getLoginHistory().then(res => {
      const response = res.data.data;
      this.timelineList = response;
      // this.avatar = response.find(item => item.id == 1).avatar;
      console.log(response);
    });
    this.versionHistorylist();
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log('文件列表移除文件时的钩子'+file, fileList);
    },
    handlePreview(file) {
      console.log('点击文件列表中已上传的文件时的钩子'+file);
    },
    handleExceed(files, fileList){
      this.$message({
        message: '警告哦，只能上传三个文件！',
        type: 'warning'
      });
    },
    handleSuccess(data) {
      if(data.data==201){
        this.$message('上传文件名称不规范!');
        return;
      }

      this.$message({
        message: '上传成功',
        type: 'success'
      });
      if(data.data.fileType===1){
        this.versionForm.appDownload=data.data.url
      }else if(data.data.fileType===2){
        this.versionForm.posDownload=data.data.url
      }else {
        this.versionForm.wordDownload=data.data.url
      }
    },
    versionHistorylist(){
      versionHistory(this.versionQuery).then(res=>{
        const response = res.data.data;
        this.versionHistory = response.list;
        this.versionQuery.total=response.total;

      })
    },
    versionHistoryHandlerDelete(id){
      versionHistoryDelete({id:id}).then(res=>{
        this.$message({
          message: '删除迭代日志成功',
          type: 'success'
        });
        this.versionHistorylist();
      }).catch(_ => {this.$message.error('删除迭代日志失败');});
    },
    submitForm(formName) {
      //判断还有什么文件未上传
      if(this.versionForm.appDownload==null||this.versionForm.appDownload==''){
        this.$message('未上传APP安装包');
        return;
      }
      if(this.versionForm.posDownload==null||this.versionForm.posDownload==''){
        this.$message('未上传POS安装包');
        return;
      }
      if(this.versionForm.wordDownload==null||this.versionForm.wordDownload==''){
        this.$message('未上传更新文档');
        return;
      }

      this.$refs[formName].validate((valid) => {
        if (valid) {
          versionHistoryAdd(this.versionForm).then(res=>{
            this.$message({
              message: '添加新迭代成功',
              type: 'success'
            });
            this.versionHistorylist();
          }).catch(_ => {this.$message.error('添加新迭代失败哦');});
        } else {
          this.$message({
            message: '请按照规则填写信息!',
            type: 'warning'
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    downloadiPhone(){
      this.$message('请使用iPhone手机，进入 App Store下载！');
    },
    downloadWord(url) {
      if(url==null||url==''){
        this.$message('抱歉，该文件未更新！');
        return;
      }
       // 根据传入的itemId和fileType，构建下载文件的URL
       const downloadUrl = url;

       // 创建一个隐藏的<a>元素
       const link = document.createElement('a');
       link.style.display = 'none';

       // 设置<a>元素的href为下载文件的URL
       link.href = downloadUrl;

       // 设置<a>元素的download属性，指定文件的名称
       link.setAttribute('download', 'newfile.apk');

       // 将<a>元素添加到页面中
       document.body.appendChild(link);

       // 触发点击事件，开始下载文件
       link.click();

       // 删除<a>元素
       document.body.removeChild(link);
    },
     handleDownload(url, fileName) {
      if (url == null || url == '') {
        this.$message('抱歉，该文件未更新！');
        return;
      }
       /*  const params = {
           url: url,
           fileName: fileName
         };
      downloadFile(params)
           .then(response=>{
             // 创建临时URL来下载文件
             const downloadUrl = URL.createObjectURL(new Blob([response.data]));

             // 创建一个下载链接并模拟点击
             const link = document.createElement('a');
             link.href = downloadUrl;
             link.download = fileName; // 文件名
             link.click();

             // 释放临时URL资源
             URL.revokeObjectURL(downloadUrl);
           })
          .catch(error => {
            console.error(error);
            });*/

       // 获取当前域名
       let domain = window.location.hostname;
       if(domain==='localhost'||domain.startsWith('192.')){
         domain=`http://${domain}:33081`
       }else {
         domain=`https://${domain}/admin-api`
       }
       const link = document.createElement('a');
       link.href =  `${domain}/admin/version/download?url=${url}&fileName=${fileName}`
       link.setAttribute('download', fileName);
       document.body.appendChild(link);
       link.click();
    },

    //点击打开添加迭代面板
    checkVersionPass(){
      if(this.versionPassowrd==''||this.versionPassowrd==null){
        this.$message('请输入密钥进入!');
        return;
      }
      if(this.versionPassowrd.toLowerCase()!='yliyun'){
        this.$message.error('错了哦，密码不对！');
        return;
      }
      this.versionPassVisible = false
      this.drawer = true
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.$refs['versionForm'].resetFields();
          done();
        })
        .catch(_ => {});
    },
    splitTime(val) {
      const newVal = val.split(' ')[0];
      return newVal;
    },
    handleDateChange(dateRange) {
      this.dateRange = dateRange
      this.getData()
    },
    changeType() {
      this.getData()
    },
    getData() {
      /*queryUserStatistics().then(res => {
        this.overview = res.data.data.data
      })*/
      let param = {
        registerType: this.memberRegisterOptionsValue,
        startTime: this.dateRange[0],
        endTime: this.dateRange[1]
      }
      queryAddUserStatistics(param).then(res => {
        this.lineData.rows = res.data.data.data

        let memberTotal = 0;
        this.lineData.rows.forEach(row => {
          if (row.hasOwnProperty('count')) {
            memberTotal += row.count;
          }
        });
        this.memberTotal = memberTotal;
      })
    },
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
      switch (type) {
        case 'newVisitis':
          this.$router.push({ path: 'user/list' })
          break
        case 'messages':
          this.$router.push({ path: 'goods/list' })
          break
        case 'purchases':
          this.$router.push({ path: 'repository/merchandise/list' })
          break
        case 'shoppings':
          this.$router.push({ path: 'order/list' })
          break
      }
    }
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.version-icon{
  font-size: 20px;
}
.downloadFile{
  cursor:pointer;
}
.colorText {
  // color:rgb(48,48,48);
  color: gray;
}

.el-avatar ::v-deep img {
  height: 40px !important;
  width: 40px !important;
}

.dashboard-editor-container {
  padding: 32px;
  background-color: #fff;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #e0e7e7;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shoppingCard {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shoppingCard {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}
html.body{
  font-family: "Helvetica Neue", Arial,sans-serif;
}
</style>
